<template>
	<u-popup
		mode="bottom"
		bgColor="transparent"
		:show="showPrivacy"
		@open="openPrivacy"
		@close="closePrivacy">
		<view class="login-popup">
			<view class="login-popup-title main-flex">微信授权登录</view>
			<view class="login-popup-content">
				<view class="login-popup-content-t">为了为您提供更优质的服务，我们需要获得你的手机号码:</view>
				<view class="login-popup-content-b">
					<view class="privacy-form">
						<uni-forms
							:modelValue="formData"
							ref="formRef"
							:label-width="80"
							:rules="rules">
							<uni-forms-item label="手机号码" name="phone">
								<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号码" />
							</uni-forms-item>
							<uni-forms-item label="验证码" name="code">
								<view class="login-code main-flex">
									<view class="main-flex-item">
										<uni-easyinput type="text" v-model="formData.code" placeholder="请输入验证码" />
									</view>
									<button class="ty-button login-code-btn" @click="getCode">{{tips}}</button>
								</view>
							</uni-forms-item>
						</uni-forms>
						<u-code
							:seconds="seconds"
							@end="end"
							@start="start"
							ref="codeRef" 
							@change="codeChange"></u-code>
					</view>
					<view class="login-popup-btn">
						<button :isSubmit="isSubmit" :disabled="isSubmit" class="ty-button ty-button-confirm login-popup-btn-item" @click="confirmPrivacy">授权</button>
						<button class="ty-button ty-button-cancel login-popup-btn-item" @click="cancelPrivacy">拒绝</button>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
  /**
   * PrivacyPopup 授权弹窗
   * @description 授权弹窗
   * @event {Function} close 关闭
   */
	import { computed, onMounted, ref, watch } from "vue"
	import { onReady } from '@dcloudio/uni-app';
	import useUserStore from "@/store/modules/user"
	import useSetStore from '@/store/modules/set'
	import { appletBindPhone, getNodeMsg } from "@/api/app_api/login"
	import { setToken } from '@/utils/auth'
	import modal from '@/plugins/modal'
	import { throttle, debounce, test, sleep } from '@/uni_modules/uview-plus'
	import md5 from 'js-md5'
	
	const userStore = useUserStore()
	const setStore = useSetStore()
	const props = defineProps({
		showPrivacy: {
			type: Boolean,
			default: false 
		}
	})
	
	const emits = defineEmits(['close', 'confirm', 'cancel'])
	const openPrivacy = () => {
		
	}
	const closePrivacy = () => {
		emits('close')
	}
	
	const formRef = ref(null)
	const formData = ref({
		phone: '',
		code: ''
	})
	// 表单验证
	const rules = ref({
		phone: {
			rules: [{
				required: true,
				errorMessage: '请输入手机号码'
			}, {
				validateFunction: function (rule,value,data,callback) {
					if (!test.mobile(value)) {
						callback('请输入正确手机号码')
					}
					return true
				}
			}]
		},
		code: {
			rules: [{
				required: true,
				errorMessage: '请输入验证码'
			}]
		}
	})
	
	// 验证码相关
	const tips = ref('获取验证码')
	const seconds = ref(60)
	const codeRef = ref(null)
	const codeChange = (text) => {
		tips.value = text
	}
	const end = () => {
		console.log('结束')
	}
	const start = () => {
		console.log('开始')
	}
	const getCode = () => {
		if (!formData.value.phone || !test.mobile(formData.value.phone)) return uni.$u.toast('请输入正确手机号码')
		if(codeRef.value.canGetCode) {
			getNodeMsg({
				phone: formData.value.phone,
				status: 0,
				code: md5(`zyzy&${formData.value.phone}`)
			}).then(res => {
				uni.$u.toast('验证码已发送')
				codeRef.value.start()
			})
		} else {
			uni.$u.toast('倒计时结束后再发送')
		}
	}
	
	const isSubmit = ref(false)
	const confirmPrivacy = (e) => {
		formRef.value.validate().then(formRes => {
			isSubmit.value = true
			const params = {
				...formRes
			}
			appletBindPhone(params).then(res => {
				if (res.token) {
					emits('close')
					uni.$u.toast(res.msg)
					setToken(res.token)
					userStore.getUserInfo()
					uni.$u.sleep(1000).then(() => {
						isSubmit.value = false
						uni.switchTab({
							url: '/pages/index/index'
						})
					})
				} else {
					setStore.setBindPhone({
						...res.data,
						phone:params.phone
					})
					uni.$u.sleep(1000).then(() => {
						uni.navigateTo({
							url: `/pages/mine/correlation`
						})
						isSubmit.value = false
					})
				}
			}).catch(err => {
				isSubmit.value = false
			})
		})
	}
	// 拒绝
	const cancelPrivacy = () => {
		emits('cancel')
		emits('close')
	}
	onReady(() => {
		formRef.value.setRules(rules.value)
	})
</script>

<style lang="scss" scoped>
  .login-popup {
		border-radius: 20px 20px 0rpx 0rpx;
		background-color: #ffffff;
		padding: 0 15px;
		padding-bottom: var(--window-bottom);
		&-title {
			height: 48px;
			font-size: 16px;
			font-weight: 600;
			text-align: center;
			justify-content: center;
		}
		&-content {
			padding: 40rpx 0;
			&-t {
				font-size: 28rpx;
			}
			.privacy {
				&-form {
					margin-top: 40rpx;
				}
				&-item {
					height: 72rpx;
					margin: 20rpx 0;
					&-name {
						font-size: 28rpx;
						width: 100rpx;
					}
					&-input {
						font-size: 28rpx;
					}
					&-header {
						position: relative;
						&-btn {
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							z-index: 1;
							opacity: 0;
						}
					}
				}
			}
		}
		&-btn {
			margin-top: 60rpx;
			&-item {
				width: 100%;
				height: 72rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: 600;
				margin-top: 30rpx;
			}
		}
	}
	.login-code {
		&-btn {
			width: 110px;
			height: 36px;
			border-radius: 4px;
			padding: 0;
			margin: 0;
			margin-left: 20rpx;
			font-size: 14px;
			color: #ffffff;
			background-color: $primary-color;
		}
	}
</style>
